// 模拟的商品数据
const products = [
    { name: "兰州拉面", price: 15 ,description: "一清（汤清）、二白（萝卜白）、三红（辣椒油红）、四绿（香菜、蒜苗绿）、五黄（面条黄亮），面条劲道，汤鲜味美。",image:"img/兰州拉面.jpeg",storeAddress: "北京市朝阳区XX大街23号", detailUrl: "兰州拉面.html" },
    { name: "意大利披萨", price: 55 ,description: "源自意大利，饼底薄脆，上面铺满各种新鲜的食材，如番茄酱、芝士、蔬菜、火腿等，经过高温烘烤，芝士融化，香气扑鼻，口感丰富。",image:"img/意大利比萨.jpeg",storeAddress: "北京市海淀区XX路14号", detailUrl: "意大利披萨.html" },
    { name: "日本寿司", price: 34,description: "日本的代表性美食，将生鱼片等食材铺在醋饭上，造型多样，注重食材的新鲜度，味道清淡却不失鲜美，是健康又美味的选择。",image:"img/日本寿司.jpeg",storeAddress: "北京市怀柔区XX路7号", detailUrl: "日本寿司.html" },
    { name: "珍珠奶茶", price: 10 ,description: "起源于台湾，Q弹的珍珠搭配香浓奶茶，冷热皆宜，口感软糯香甜，是年轻人的心头好。",image:"img/珍珠奶茶.jpeg",storeAddress: "北京市朝阳区XX路6号", detailUrl: "珍珠奶茶.html" },
    { name: "北京烤鸭", price: 85 ,description: "作为中国北京的传统名菜，以果木炭火烤制，色泽红润，肉质肥而不腻，外脆里嫩，搭配薄饼、葱丝、黄瓜和甜面酱，风味独特。",image:"img/北京烤鸭.jpeg",storeAddress: "北京市西城区XX路3号", detailUrl: "北京烤鸭.html" },
];

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('priceFilterForm');
    const minPriceInput = document.getElementById('minPrice');
    const maxPriceInput = document.getElementById('maxPrice');
    const priceRangeDisplay = document.getElementById('priceRangeDisplay');
    const productList = document.getElementById('productList');
    const productDetails = document.getElementById('productDetails');
    const productName = document.getElementById('productName');
    const productPrice = document.getElementById('productPrice');
    const productDescription = document.getElementById('productDescription');
    const productImage = document.getElementById('productImage');
    const detailLink = document.getElementById('detailLink'); // 获取详情链接元素

    // 实时更新价格范围显示
    function updatePriceRange() {
        const minPrice = parseFloat(minPriceInput.value);
        const maxPrice = parseFloat(maxPriceInput.value);
        if (isNaN(minPrice)) {
            minPrice = 0;
        }
        if (isNaN(maxPrice)) {
            maxPrice = Infinity;
        }
        if (minPrice > maxPrice) {
            priceRangeDisplay.textContent = "价格范围无效";
        } else {
            priceRangeDisplay.textContent = "价格范围：" + minPrice + " - " + maxPrice;
        }
    }
    
    function generateProductList(filteredProducts = products) {
        productList.innerHTML = "";
        filteredProducts.forEach(function (product) {
            const listItem = document.createElement('li');
            listItem.textContent = `${product.name} - 价格：${product.price}`;
            listItem.addEventListener('click', function () {
                showProductDetails(product);
            });
            productList.appendChild(listItem);
        });
    }
    
    // 展示商品详情
    function showProductDetails(product) {
        productName.textContent = product.name;
        productPrice.textContent = `价格：${product.price}`;
        productDescription.textContent = product.description;
        productImage.src = product.image;
        storeAddress.textContent = `店铺地址：${product.storeAddress}`;
        detailLink.href = product.detailUrl; // 设置详情链接的URL
        productDetails.style.display = "block";
    }
    
    // 表单提交事件处理，筛选商品并更新列表
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const minPrice = parseFloat(minPriceInput.value);
        const maxPrice = parseFloat(maxPriceInput.value);
        if (minPrice > maxPrice) {
            alert("最低价格不能高于最高价格，请重新输入！");
            return;
        }
        const filteredProducts = products.filter(function (product) {
            return product.price >= minPrice && product.price <= maxPrice;
        });
        generateProductList(filteredProducts);
        productDetails.style.display = "none"; // 关闭已打开的菜品详情
    });
    
    minPriceInput.addEventListener('input', updatePriceRange);
    maxPriceInput.addEventListener('input', updatePriceRange);
    generateProductList();
    updatePriceRange();
});
